// Core variables and mixins
@import 'lesshat';
@import 'for';
@import 'variables';

.switch-color {
	.color-box {
		border-radius: 50%;
		padding: 0;
		width: 26px;
		height: 26px;
		display: inline-block;
	}
	.blue {
		background-color: @primary;
	}
	.green {
		background-color: @success;
	}
	.aqua {
		background-color: @info;
	}
	.yellow {
		background-color: @warning;
	}
	.pink {
		background-color: @pink;
	}
	.purple {
		background-color: @purple;
	}
}

// Green
.green {
	.theme-variant(@success, @purple);
}
// Aqua
.aqua {
	.theme-variant(@info, @purple);
}
// Yellow
.yellow {
	.theme-variant(@warning, @primary);
}
// Pink
.pink {
	.theme-variant(@pink, @primary);
}
// Purple
.purple {
	.theme-variant(@purple, @warning);
}

.theme-variant(@color1, @color2) {
	// Brand
	// -------------------------
	.brand {
		background-color: darken(@color1, 10%);
	}

	// Header
	// -------------------------
	header {
		background-color: @color1;
	}

	// Navigation
	// -------------------------

	.navigation {
		.header {
			color: @color1;
		}
		> li {
			> a {
				&[aria-expanded="true"],
				&:hover,
				&.active {
					> i {
						background-color: @color1;
					}
				}
			}
		}
	}

	// Page Header
	// -------------------------
	.page-header {
		color: darken(@color1, 5%)
	}
}